<template>
  <div>
    <h1>App</h1>
    <p v-bgcolor="'yellow'">{{num | fixedNum(4) | add$}}</p>
    <button @click="num++">累加{{num}}</button>
    <button @click="$destroy()">卸载自己{{num}}</button>
    <Count/>
  </div>

</template>

<script>
import Count from "@/components/Count.vue"
export default {
  name: "App",
  components: {
    Count
  },
  data() {
    return {
      num: 12
    }
  },
 
  directives: {
    bgcolor(el, bending) {
      el.style.background = bending.value;
    }
  },
  beforeCreate() {
    console.log('---beforeCreate');
  },
  created() {
    console.log('----created',"注入完所有的配置，可以拿到数据了");
  },
  beforeMount() {
      console.log('---beforeMount')
  },
  mounted() {
    console.log('----mounted',"DOM加载完毕，可以添加事件，还有定时器功能")
  },
  beforeUpdate() {
    console.log('----beforeUpdate', "页面更新渲染前，此时页面显示数据和实际数据不一致");
  },
  updated() {
    console.log("----updated", "页面渲染完毕")
  },
  beforeDestroy() {
    console.log("----beforeDestroy")
  },
  destroyed() {
    console.log("-----destroyed")
  }
}
</script>

<style>

</style>